<template>
  <div>
    <!-- 顶部搜索组件 -->
    <Search :labels="labels" @searchWareHouse="searchWareHouse" />
    <!-- 顶部搜索组件 -->

    <el-card class="table">
      <el-row type="flex" justify="space-between">
        <el-col>
          <el-button type="success" round class="addBtn">新增库区</el-button>
        </el-col>
        <uploadExcel />
      </el-row>
      <el-table
        :data="areaData"
        border
        style="width: 100%"
      >
        <el-table-column
          type="index"
          label="序号"
          width="150"
          align="center"
        />
        <el-table-column
          prop="warehouseName"
          label="所属仓库"
          width="120"
          align="center"
        />
        <el-table-column
          prop="code"
          label="库区编号"
          width="120"
          align="center"
        />
        <el-table-column
          prop="name"
          label="库区名称"
          width="120"
          align="center"
        />
        <el-table-column
          prop="temperatureType"
          label="温度类型"
          width="300"
          align="center"
          :formatter="formatterTemperatureType"
        />
        <el-table-column
          prop="bearingType"
          label="承重类型"
          width="180"
          align="center"
          :formatter="formatterBearingType"
        />
        <el-table-column
          prop="type"
          label="用途属性"
          width="120"
          align="center"
          :formatter="formatterType"
        />
        <el-table-column
          prop="status"
          label="库区状态"
          width="120"
          align="center"
          :formatter="formatterStatus"
        />
        <el-table-column
          prop="personName"
          label="负责人"
          width="120"
          align="center"
        />
        <el-table-column
          prop="phone"
          label="联系电话"
          width="120"
          align="center"
        />
        <el-table-column
          prop="includedNum"
          label="库位数量"
          width="120"
          align="center"
        />
        <el-table-column
          prop="updateTime"
          label="更新时间"
          width="180"
          align="center"
        />
        <el-table-column
          fixed="right"
          label="操作"
          width="150"
          align="center"
        >
          <template v-slot="{row}">
            <el-button type="text" size="small">编辑</el-button>
            <el-button type="text" size="small" @click="editStatus(row.id,row.status,row.name)">{{ formatterStatus('','',row.status === 0 ? 1 : 0) }}</el-button>
            <el-button type="text" size="small" @click="delAreaClick(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页功能组件 -->
      <template>
        <el-pagination
          :current-page.sync="total"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          align="center"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </template>
      <!-- 分页功能组件 -->
    </el-card>
  </div>
</template>

<script>
// 导入顶部搜索框公共组件
import Search from '@/views/information/components/Search'
// 导入库区信息相关请求接口
import { getPageAreaAPI, delAreaAPI, updateAreaAPI } from '@/api/area'
export default {
// 注册组件
  components: {
    Search
  },
  data() {
    return {
      // 公共搜索组件字段
      labels: {
        warehouseCode: '仓库名称',
        areaName: '库区名称',
        status: '库区状态',
        isShowInput: false,
        isShowSelect: true
      },
      // 暂存仓库分页数据，用于传递给公共表格组件
      areaData: [],
      filterData: [],
      // 分页数据
      total: undefined,
      size: undefined
    }
  },
  created() {
    this.getAreaList()
  },
  methods: {
    // 获取库区数据渲染
    async getAreaList() {
      // 发送获取库区信息请求
      const { data } = await getPageAreaAPI()
      console.log(data)
      // 将返回的数据暂存到data对应的数组中
      this.areaData = data.data.records
      this.filterData = data.data.records
      this.total = +data.data.total
      this.size = +data.data.size
    },
    // 搜索功能实现
    searchWareHouse(data) {
      // 筛选数据返回给渲染表格数组
      this.areaData = this.filterData.filter(item => {
        const isCodeOK = item.warehouseName.includes(data.name)
        const isNameOK = item.name.includes(data.areaName)
        const isStatusOK = item.status === data.areaStatus || data.areaStatus === 2
        return isCodeOK && isNameOK && isStatusOK
      })
    },
    // 删除库区功能实现
    async delAreaClick(id) {
      try {
        // 再次弹窗确认是否删除
        await this.$confirm('确定要删除该条库区信息吗？将无法恢复！！！')
        // 发送删除库区信息请求
        await delAreaAPI([id])
        // 删除成功通知
        this.$message.success('删除库区信息成功！')
        // 刷新页面数据
        this.getAreaList()
      } catch (error) {
        this.$message.error('删除失败！请检查是否存在库位！')
      }
    },
    // 修改库区状态
    async editStatus(id, status, name) {
      try {
        // 再次弹窗确认是否修改状态
        await this.$confirm(`确定要${status === 0 ? '启用' : '停用'}【${name}】的吗?`)
        await updateAreaAPI({ id, status: status === 0 ? 1 : 0 })
        this.$message.success('修改库区状态成功！')
        // 刷新页面数据
        this.getAreaList()
      } catch (error) {
        this.$message.info('已取消操作！')
      }
    },
    // 处理表格相关数据函数
    formatterTemperatureType(row, col, val) {
      if (val === 'CW') {
        return '常温'
      } else if (val === 'LC') {
        return '冷藏'
      } else if (val === 'HW') {
        return '恒温'
      }
    },
    formatterBearingType(row, col, val) {
      if (val === 'ZX') {
        return '重型'
      } else if (val === 'QX') {
        return '轻型'
      } else if (val === 'ZX') {
        return '中型'
      }
    },
    formatterType(row, col, val) {
      if (val === 'RKHCQ') {
        return '入库缓存区'
      } else if (val === 'CKHCQ') {
        return '出库缓存区'
      } else if (val === 'CCQ') {
        return '存储区'
      } else if (val === 'FJQ') {
        return '分拣区'
      } else if (val === 'ZJQ') {
        return '质检区'
      }
    },
    formatterStatus(row, col, val) {
      return val === 0 ? '停用' : '启用'
    },
    // 分页相关函数
    handleCurrentChange() {

    },
    handleSizeChange() {

    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-pagination{
  margin-top: 20px;
}
.table{
    margin: 20px;
    .addBtn{
        margin-bottom: 20px;
    }
}
</style>
